// 编写插件方式的懒加载指令

// 1. vue3全局指令  Vue.directive -> createApp()->app.directive()
// 2. vue3全局指令  自定义钩子函数中命名规则上和组件的生命周期保持一致 inserted -> mounted

// 1. vue3插件  Vue.use()  -> createApp()->app.use(plugin)
import { useIntersectionObserver } from '@vueuse/core'
const plugin = {
  // install是插件的一个固定方法 只有是开发插件，必须提供这个方法，会在注册的时候自动执行
  install (app) {
    // 编写插件的逻辑 【全局指令】
    // app.use()插件注册的时候 会自动调用插件的install方法并且把当前的应用实例对象app传入
    // console.log(app)
    app.directive('lazy-img', {
      // 依旧是指令绑定的元素对象挂载完毕时自动执行
      // el: 图片dom元素  binding.value:图片真实的url
      mounted (el, binding) {
        // console.log(el, binding)
        // 图片懒加载核心逻辑：判断图片是否进入到视口区域如果进来才发送图片请求
        // 技术解决： 1.如何判断图片进入视口？   2.如何发送图片请求 [操作图片的src=url]
        // vueUse插件提供了一个专门用来监控dom是否进入视口区域！！
        // stop 组织已经加载完成图片重复执行加载
        const { stop } = useIntersectionObserver(
          // 监听目标元素
          el,
          ([{ isIntersecting }], observerElement) => {
            // 进入视口 true  出去视口 false
            console.log(isIntersecting)
            if (isIntersecting) {
              // 满足条件把图片的url交给图片的src属性 浏览器会自动发送图片请求
              el.src = binding.value
              // 对当前的el停止监听
              stop()
            }
          },
          // 刚进入视口区域的范围就立刻执行回调 0 - 1范围 0 代表只要进入一点，比较精确 1 是监听的元素盒子全部进入到视口区域，才算是进来了，才会执行回调函数
          { threshold: 0 }
        )
      }
    })
  }
}

export default plugin
